<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style type="text/css">
    /*对p标签进行设置，不显示后面空白一行*/
    p {
        margin: 0px;
        padding: 0px;
    }

    /*用one,对标题进行样式设置*/
    .one {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        line-height: 3em;

    }

    /*用tow,对副标题进行样式设置*/
    .tow {
        text-align: center;
        background-position: center;
        line-height: 2em;
        font-size: 14px;
        width: 800px;
        height: 30px;
        margin: 0 auto;
        background-color: rgb(229, 223, 223);
    }

    /*用tree，对正文进行样式设计*/
    .tree {
        text-align: left;
        font-size: 18px;
        text-indent: 2em;
        line-height: 2em;
        width: 800px;
        margin: 0 auto;
    }
</style>

<body>
    <div id="detail">
        <!--新闻标题-->
        <p>
        <div class="one">{{news.title}}</div>
        </p>
        <!--新闻副标题-->
        <div class="tow">{{news.author}}</div>
        <!--新闻正文-->
        <div class="tree">
            <p>{{news.content}}</p>
            
            <center><img :src="`http://localhost:9090/NewsReleaseSystem/upload${this.news.picture}`" width="600" height="400"></center>
           
        </div>

    </div>
</body>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../static/myplugs/js/plugs.js"></script>
<script src="../static/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css" charset="utf-8">


</html>